<template>
  <div class="m-25 mt-65 agora">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>人员管理</h2>
        </div>
      </div>

      <div class="normal-box-bd">
        <Card style="margin-bottom: 10px;">
            <div class="normal-list-page-hd clearfix">
              <Input placeholder="请输入用户名" class="mr-10" v-model="queryData.name" style="width: 150px" :clearable=true />
              <Input placeholder="请输入账号" class="mr-10" v-model="queryData.account" style="width: 150px" :clearable=true />
              <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click='getTableData' >查询</Button>
            </div>
          </Card>
        <div class="clearfix mb-20">
          <Button custom-icon="iconfont icon-fangkuai2"
                  type="primary"
                  size="small"
                  style="float:right"
                  @click="showCreateModal">添加</Button>
        </div>
        <div class="normal-list-page-mod">
          <Table border
                 :loading="list.loading"
                 :columns="list.columns"
                 :data="list.tableData">

          </Table>

        </div>
        <div class="normal-list-page-ft clearfix">
          <Page class="fr"
                :total="queryData.totalRecord"
                :page-size="queryData.pageSize"
                :current="queryData.page"
                @on-change="changePage"
                @on-page-size-change="onPageSizeChange"
                show-elevator
                show-total
                show-sizer></Page>
        </div>
      </div>
    </div>
    <!-- 新建&修改人员 -->
    <Modal v-model="modal.user.isShow"
           :loading="modal.user.loading"
           :mask-closable="false"
           :title="modal.user.title"
           @on-ok="postData">
      <Form ref="systemFrom"
            :model="modal.user.formData"
            :rules="modal.user.rules"
            :label-width="120">
        <FormItem label="账号"
                  prop="account">
          <Input placeholder="请输入账号"
                 v-model="modal.user.formData.account"
                 style="width:300px;" />
        </FormItem>
        <FormItem label="密码"
                  prop="password">
          <Input placeholder="请输入密码"
                 v-model="modal.user.formData.password"
                 style="width:300px;" />
        </FormItem>
        <FormItem label="名称"
                  prop="name">
          <Input placeholder="请输入名称"
                 v-model="modal.user.formData.name"
                 style="width:300px;" />
        </FormItem>
        <FormItem label="地址"
                  prop="address">
          <Input placeholder="请输入地址"
                 v-model="modal.user.formData.address"
                 style="width:300px;" />
        </FormItem>
        <FormItem label="邮件地址"
                  prop="email">
          <Input placeholder="请输入邮件地址"
                 v-model="modal.user.formData.email"
                 style="width:300px;" />
        </FormItem>
        <FormItem label="性别"
                  prop="sex">
          <RadioGroup v-model="modal.user.formData.sex">
            <Radio v-for="sex in sexList" :key="sex.label" :label="sex.label">{{sex.name}}</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="描述"
                  prop="description">
          <Input placeholder="请输入描述"
                 v-model="modal.user.formData.description"
                 style="width:300px;" />
        </FormItem>
      </Form>
    </Modal>
  <!--分配区域-->
        <Modal v-model="modal.set_role_group.show_modal" :title="modal.set_role_group.modal_title" :loading="modal.set_role_group.loading"
          @on-ok="post_rolegroup_list">
          <Form ref="set_role_group_form" :rules="modal.set_role_group.rules"
            :label-width="80">
              <Tree :data="modal.set_role_group.role_group_tree" show-checkbox multiple @on-check-change="changeTree"></Tree>
          </Form>
        </Modal>
  </div>
</template>
<script>
import UserApi from '@/api/check/voUser.js'
import { Message } from 'view-design'

export default {
  data () {
    return {
      sexList: [
        {
          label: 0, name: '女'
        },
        {
          label: 1, name: '男'
        }
      ],
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0
      },
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          // {
          //   type: 'selection',
          //   width: 50,
          //   align: 'center'
          // },
          /** 开始自动生成 */
          {
            title: '用户id',
            key: 'id',
            align: 'center',
            minWidth: 130
          },
          {
            title: '账号',
            key: 'account',
            minWidth: 150,
            align: 'center'
          },
          {
            title: '名称',
            key: 'name',
            align: 'center',
            minWidth: 130
          },
          {
            title: '地址',
            key: 'address',
            align: 'center',
            minWidth: 150
          },
          {
            title: '邮件地址',
            key: 'email',
            align: 'center',
            minWidth: 250
          },
          {
            title: '性别',
            key: 'sex',
            align: 'center',
            minWidth: 100,
            render: (h, params) => {
              if (params.row.sex) {
                return h('div', '男')
              } else {
                return h('div', '女')
              }
            }
          },
          {
            title: '描述',
            key: 'description',
            align: 'center',
            minWidth: 150
          },
          {
            title: '添加时间',
            key: 'createTime',
            align: 'center',
            minWidth: 140
          },
          {
            title: '修改时间',
            key: 'updateTime',
            align: 'center',
            minWidth: 140
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 150,
            render: (h, params) => {
              return h('div', { class: 'action-group' }, [
                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'left',
                      content: '分配任务'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'primary',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            // this.showUpdateModal(params.index);
                            this.show_set_role_group(params.row.id)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: 'md-document',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),
                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'left',
                      content: '编辑'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'primary',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            // this.showUpdateModal(params.index);
                            this.showUpdateModal(params.row)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-bianjisekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),

                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'right',
                      content: '删除'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'error',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            this.delData(params.row.id)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-shanchusekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                )
              ])
            }
          }
        ]
      },
      modal: {
        user: {
          isShow: false,
          loading: true,
          type: 'create', // create 新建，update 修改
          title: '添加',
          formData: {},
          rules: {
            // check
            account: [
              {
                required: true,
                trigger: 'blur',
                pattern: /^1[3456789]\d{9}$/,
                message: '手机号码格式不正确'
              }
            ],
            password: [
              {
                required: true,
                message: '请填写密码',
                trigger: 'blur'
              }
            ],
            name: [
              {
                required: true,
                message: '请填写名称',
                trigger: 'blur'
              }
            ]
          }
        },
        set_role_group: {
          show_modal: false,
          loading: true,
          modal_title: '分配任务',
          userId: null,
          role_group_tree: [], // 区域树
          data: {}
        }
      }
    }
  },
  created () {
    this.getTableData()
  },
  methods: {
    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },
    // 获取列表
    async getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      UserApi.getPageList(that.queryData)
        .then((res) => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
      //   console.log(this.list)
    },
    //
    changeTree (list, val) {
      console.log(val)
      if (val.children.length || val.parentId) {

      } else {
        this.$Notice.error({
          title: '请精确到小区!'
        })
        val.checked = false
      }
    },
    // 获取区域
    get_role_type (id) {
    //   console.log(id)
      let that = this
      UserApi.getUserArea(id)
        .then(res => {
          let _tmp_tree_data = res.data
          let access_id_list = []

          that.modal.set_role_group.role_group_tree = that.filter_menu_selected(
            _tmp_tree_data,
            access_id_list
          )
        })
        .catch(function (e) {
          that.$Message.error(e)
        })
    },
    // 获取选中的菜单项
    get_all_selected_rolegroup_id_list (tree_data_list, arr) {
      for (var i = 0; i < tree_data_list.length; i++) {
        if (tree_data_list[i]['checked'] === true && tree_data_list[i].children.length == 0 && tree_data_list[i].parentId) {
          arr.push(tree_data_list[i].id)
        }
        if (tree_data_list[i].children.length > 0) {
          this.get_all_selected_rolegroup_id_list(
            tree_data_list[i].children,
            arr
          )
        }
      }
      return arr
    },
    // 处理数据设置是否选中项
    filter_menu_selected (origin_data_list, access_list) {
      const arr = []
      for (var i = 0; i < origin_data_list.length; i++) {
        arr[i] = origin_data_list[i]
        arr[i].title = origin_data_list[i].label
        arr[i].checked = origin_data_list[i].selected && origin_data_list[i].children.length == 0 ? origin_data_list[i].selected : false
        arr[i].selected = undefined

        if (origin_data_list[i].children.length > 0) {
          this.filter_menu_selected(origin_data_list[i].children, access_list)
        }
      }
      return arr
    },
    // 提交任务分配
    post_rolegroup_list () {
      const that = this
      const selected_rolegroup_list = this.get_all_selected_rolegroup_id_list(
        this.modal.set_role_group.role_group_tree,
        []
      )
      //   console.log(selected_rolegroup_list)
      UserApi.postArea({
        uid: that.modal.set_role_group.userId,
        ids: selected_rolegroup_list
      })
        .then(rs => {
          that.modal.set_role_group.show_modal = false
          that.modal.set_role_group.loading = true
          that.$Message.success('操作成功')
        })
        .catch(error => {
          that.modal.set_role_group.show_modal = false
          that.modal.set_role_group.loading = true
          that.$Message.error(error)
        })
    },
    showCreateModal () {
      this.modal.user.title = '添加人员'
      this.modal.user.type = 'create'
      this.modal.user.formData = {}
      this.modal.user.isShow = true
      this.$refs['systemFrom'].resetFields()
    },
    showUpdateModal (row) {
      UserApi.getDetail(row.id).then((res) => {
        this.modal.user.title = '修改人员'
        this.modal.user.type = 'update'
        this.modal.user.formData = res.data
        this.$refs['systemFrom'].resetFields()
        this.modal.user.isShow = true
      })
    },
    // 显示分配任务
    show_set_role_group (id) {
      this.$refs['set_role_group_form'].resetFields()
      this.modal.set_role_group.show_modal = true
      this.modal.set_role_group.userId = id
      this.get_role_type(id)
    },
    // 新建&修改
    postData () {
      const that = this
      that.$refs['systemFrom'].validate((valid) => {
        if (valid) {
          if (!that.modal.user.formData.id) {
            // 新建
            UserApi.add(that.modal.user.formData)
              .then((res) => {
                that.modal.user.isShow = false
                that.modal.user.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          } else {
            // 修改
            UserApi.update(that.modal.user.formData.id, that.modal.user.formData)
              .then((res) => {
                that.modal.user.isShow = false
                that.modal.user.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          }
        } else {
          that.modal.user.loading = false
          that.$nextTick(() => {
            that.modal.user.loading = true
          })
        }
      })
    },
    // 删除
    delData (id) {
      let that = this
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除id为 <strong>' +
          id.toString() +
          '</strong> 的考核标准吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          UserApi.del({
            ids: [id]
          }).then((res) => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              that.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    }
  }
}
</script>
<style>
.ivu-tree-title {
    display: inline-block;
    margin: 0;
    padding: 0 4px;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: top;
    color: #515a6e;
    -webkit-transition: all 0.2s ease-in-out;
    word-break: break-all;
    overflow: auto;
    white-space: normal;
    transition: all 0.2s ease-in-out;
    width:90%
}
</style>
<style lang="less" scoped>
table {
  width: 100%;
  border-collapse: collapse;
  > div {
    width: 100%;
    tr {
      width: 100%;
      vertical-align: middle;
      th {
        font-size: 1.5em;
        background: #f8f8f9;
      }
      td,
      th {
        box-sizing: border-box;
        padding: 5px 0;
        border: 1px solid #e8eaec;
      }
      .c0 {
        font-size: 1.5em;
        width: 4vw;
        background: #fff;
      }
      .c1 {
        font-size: 1.5em;
        width: 12vw !important;
        background: #fdfdfd;
      }
      .c2 {
        width: 20vw;
        font-size: 1.2em;
      }
      .c3 {
        width: 35vw;
        font-size: 1.2em;
      }
      .c4 {
        width: 15vw;
        font-size: 1.5em;
      }
    }
    tr:hover {
      background: #efefef !important;
      transition: all ease 0.5s;
    }
  }
}
</style>
